<template>

  <!-- 风险评估 -->

  <div class="board_page">
    <!-- 左边 -->
    <dv-border-box-13
      style="width: 23%;height: 84vh"
      class="left fade_animition_left"
      :color="['#3A506A', '#3BD5FD']"
      backgroundColor="rgba(23, 36, 63, 0.8)">


      <h6 class="l_title-s">风险评估总数</h6>
      <div ref="chart_0" class="chart_0"></div>

      <dv-decoration-10 style="width:100%;height:5px;margin-bottom:16px"/>

      <h6 class="l_title-s">中高风险数量排序</h6>
      <dv-scroll-board :config="leftTableConfig" class="dv_table_left"/>

    </dv-border-box-13>

    <!-- 右边 -->
    <dv-border-box-13
      class="right fade_animition_right"
      :color="['#3A506A', '#3BD5FD']"
      style="width: 23%;height: 84vh"
      backgroundColor="rgba(23, 36, 63, 0.8)">
      <dv-decoration-1 class="board_page-right-d" style="width:100px;height:40px;"/>

      <h6 class="l_title-s">风险评估</h6>
      <dv-scroll-board :config="rightTableConfig" class="dv_table_right"/>

    </dv-border-box-13>
  </div>
</template>

<script>
import {riskLevelCount, riskOrderCount, riskOrderInfo} from '@/services/model/data-board'
import Format from '@/utils/format'

const Echarts = require('echarts')

export default {
  data() {
    return {
      charts: null,
      // 风险评估-路线风险排序
      riskOrderList: [],
      // 风险评估-最近数据轮播
      rightOrderList: []
    }
  },
  computed: {
    leftTableConfig() {
      return {
        header: ['路线', '数量'],
        data: this.riskOrderList.map(x => [x.name, x.num]),
        headerBGC: '#22314B',
        oddRowBGC: '#162036',
        evenRowBGC: '#222B40',
        rowNum: 8,
        headerHeight: 40,
        index: true,
      }
    },
    rightTableConfig() {
      return {
        header: ['位置', '时间', '风险等级'],
        data: this.rightOrderList.map(x => [`<p class="davav_p" title="${x.location}">${x.location}</p>`, x.checkTime ? Format(new Date(x.checkTime)) : '', x.riskLevelName]),
        headerBGC: '#22314B',
        oddRowBGC: '#162036',
        evenRowBGC: '#222B40',
        rowNum: 12,
        headerHeight: 40,
        columnWidth: [300, 160, 100]
      }
    }
  },
  methods: {
    // 路线改变
    refresh(deptTreeId, roadId) {
      this.queryOrderList(deptTreeId, roadId)
      this.queryData(deptTreeId, roadId)
      this.queryOrderInfo(deptTreeId, roadId)
    },
    // 查询数据
    async queryData(deptTreeId, roadId) {
      const {data} = await riskLevelCount({deptTreeId, roadId})
      const list = data?.itemList?.map(x => ({value: x.num, name: x.name})) || []
      this.updateChart(list)
    },
    // 风险评估-路线风险排序
    async queryOrderList(deptTreeId, roadId) {
      const {data} = await riskOrderCount({deptTreeId, roadId})
      this.riskOrderList = data || []
    },
    // 风险评估-最近数据轮播
    async queryOrderInfo(deptTreeId, roadId) {
      const {data} = await riskOrderInfo({deptTreeId, roadId})
      this.rightOrderList = data || []
    },
    // 初始化echarts
    initChart() {
      this.charts = Echarts.init(this.$refs.chart_0, null, {
        locale: 'ZH'
      })
    },
    // 渲染数据
    updateChart(data) {
      const option = {
        tooltip: {
          trigger: 'item'
        },
        color: [
          '#0DC26B',
          '#0073b7',
          '#f39c12',
          '#ff851b',
          '#e43321'
        ],
        legend: {
          top: '3%',
          left: 'left',
          textStyle: {
            color: '#ffffff'
          },
          formatter: (name) => {
            let item = data.find(x => x.name === name)
            return name + ' ' + item.value
          },
        },
        series: [
          {
            name: '风险等级',
            type: 'pie',
            radius: ['20%', '80%'],
            avoidLabelOverlap: false,
            roseType: 'area',
            top: 50,
            label: {
              show: false,
              position: 'center'
            },
            labelLine: {
              show: false
            },
            data
          }
        ]
      }
      this.charts.setOption(option)
    }
  },
  mounted() {
    this.initChart()
    let deptTreeId = this.$route.params.deptTreeId
    let roadId = this.$route.params.roadId
    this.refresh(deptTreeId, roadId)
    window.onresize = () => {
      this.charts.resize()
    }
  }
}
</script>

<style lang="less" scoped>
  @import url('./common.less');
</style>

<style lang="less" scoped>
  .chart_0 {
    width: 100%;
    height: 21.875rem /* 350/16 */;
  }

  .dv_table_left {
    margin-top: 1.5rem /* 24/16 */;
    width: 100%;
    height: 30vh;
  }

  .dv_table_right {
    margin-top: 1.5rem /* 24/16 */;
    width: 100%;
    height: 50vh;
  }
</style>
